<?php $this -> load -> view('header'); ?>
<style>
	body .modal {
		  width: 77%; /* desired relative width */
		  left: 5%; /* (100%-width)/2 */
		  /* place center */
		  margin-left:auto;
		  margin-right:auto;
	}
	.fade{
		    -webkit-transition-delay: .5s;  // make this however long you need
		    transition-delay: .5s;
	}
</style>
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
	<?php //$this->load->view('sidebar');?>
	<!-- BEGIN PAGE -->
	<div class="page-content">
		<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<div id="portlet-config" class="modal hide">
			<div class="modal-header">
				<button data-dismiss="modal" class="close" type="button"></button>
				<h3>portlet Settings</h3>
			</div>
			<div class="modal-body">
				<p>
					Here will be a configuration form
				</p>
			</div>
		</div>
		<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<!-- BEGIN PAGE CONTAINER-->
		<div class="container-fluid">
			<!-- BEGIN PAGE HEADER-->
			<div class="row-fluid">
				<div class="span12">
					<!-- BEGIN PAGE TITLE & BREADCRUMB-->
				<!--	<h3 class="page-title"> Daftar Laporan</h3>
					<?php $this -> load -> view('breadcrumb'); ?> -->
					<!-- END PAGE TITLE & BREADCRUMB-->
				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
			<!--<div class="row-fluid">
				<div class="span12">
					
				</div>
			</div>-->
			
				<div class="row-fluid">
						<div class="span2 responsive" data-tablet="span6" data-desktop="span3">
							<div class="dashboard-stat green">
								<div class="visual" style="height: 10px;">
									<i class="icon-bar-chart"></i>
								</div>
								<div class="details">
									<div class="number" id="cfNumber"><?php echo $jumlahDraft?></div>
									<div class="desc">Jumlah Laporan CF</div>
								</div>
								<a class="more" href="#" id="cfBtnList">
								View more <i class="m-icon-swapright m-icon-white"></i>
								</a> 						
							</div>
						</div>
						
						<div class="span2 responsive" data-tablet="span6" data-desktop="span3">
							<div class="dashboard-stat purple">
								<div class="visual" style="height: 10px;">
									<i class="icon-bar-chart"></i>
								</div>
								<div class="details">
									<div class="number" id="dqaNumber"><?php echo $jumlahProgress?></div>
									<div class="desc">Jumlah Laporan Progress</div>
								</div>
								<a class="more" href="#" id="dqaBtnList">
								View more <i class="m-icon-swapright m-icon-white"></i>
								</a> 						
							</div>
						</div>
						
						<div class="span2 responsive" data-tablet="span6" data-desktop="span3">
							<div class="dashboard-stat red">
								<div class="visual" style="height: 10px;">
									<i class="icon-bar-chart"></i>
								</div>
								<div class="details">
									<div class="number" id="finalNumber"><?php echo $jumlahFinal?></div>
									<div class="desc">Jumlah Laporan Final</div>
								</div>
								<a class="more" href="" id="finalBtnList">
								View more <i class="m-icon-swapright m-icon-white"></i>
								</a> 						
							</div>
						</div>
					</div>
		
		<!-- END JUMLAH LAPORAN FINAL OLEH CF & JUMLAH LAPORAN TERKIRIM CF -->
		<div class="clearfix"></div>
		
		<div class="row-fluid">
			<div class="span12">
				
				<!-- BEGIN PORTLET-->
				<div class="portlet solid bordered light-grey">
					<div class="portlet-title">
						<h4 id="labelLaporan"> </h4>
								<div class="actions" id="showExportFinalExcel" style="display: none;">
									<a href="<?php echo base_url("report/exportExcelAll"); ?>" class="btn blue"><i class="icon-table"></i> Export to Excel</a>
								</div>
					</div>
					<div class="portlet-body">
						<?php
						  $this -> load -> view('dashboard/laporanCFUser');
						  $this -> load -> view('dashboard/laporanCFProgress');
						//$this -> load -> view('dashboard/laporanME');
						//$this -> load -> view('dashboard/laporanDQA');
						  $this -> load -> view('dashboard/laporanFinal');
						?>
					</div>
				</div>
				<!-- END PORTLET-->
			</div>
			
			<!-- END PAGE CONTENT -->
		</div>
		<!-- END PAGE CONTAINER-->
	</div>
	<!-- END PAGE -->
</div>
<!-- END CONTAINER -->

<!-- END CONTAINER -->
<div id="alertModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3 id="myModalLabel2">Laporan Kegiatan</h3>
	</div>
	<div class="modal-body" id="alertMessage">
		
		 <iframe id="frameLap" frameborder="0" width="100%" height="400" id="iframe" ></iframe>
		 
	</div>
	<div class="modal-footer">
		<button data-dismiss="modal" class="btn green">OK</button>
		<button class="btn green" id="btnCetakPDF">Cetak PDF</button>
	</div>
</div>
<div id="laporanDiv" style="display: none">
	<input type="hidden" id="idLaporan"/>
</div>
<?php $this->load->view('footer')?>
<script>

	$(document).ready(function() {
		
	    $('#tbl_cf_perbaikan, #tbl_cf_draft, #tbl_final_perbaikan, #tbl_me, #tbl_dqa').dataTable(
	    	{"iDisplayLength": 20,"sPaginationType": "bootstrap","aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0] }] }
	    );

	lihatLaporan = function (id){
 		$('#frameLap').attr('src', '<?php echo base_url().'report/finalReportHtml/';?>'+id);
 		$('#alertModal').modal('show');
 		$('#idLaporan').val(id);
 	}		
 	
 	$('#alertModal').on('show', function () {
		$(this).find('.modal-body').css({
		              width:'auto', //probably not needed
		              height:'auto'
		});
	});
	
 	$("#alertModal").draggable({
      	handle: ".modal-header"
  	});
  	
  	$('#btnCetakPDF').click(function(){
		var berkasId = $('#idLaporan').val();
		window.location = '<?php echo base_url().'report/cetakLaporanPDF/';?>' + berkasId ;			
	});
  	
	
	findFinalBerkas = function(idxPage){
			var display = [ "displayCBO", "displayME", "displayDQA", "displayCF" ];
			$(display).each(function( i, setDisplay ) {
				$("#"+setDisplay).hide();
			});
			$("#displayFINAL, #showExportFinalExcel").show();
			if (idxPage == 0 || idxPage == null || typeof idxPage == 'undefined'){
				idxPage = 1;
			} 
			$.ajax({
				  url: "<?php echo base_url()?>inbox/findFinalBerkasByUserLogin",
				  success: function(data){
				  	rebuildFinalBerkasTableHandler(data, idxPage, 'tbl_final');
				  	$("#tbl_final").css("width", ""); // akalin width
				  	$('#final_berkas_success_loading').hide();
					$('#tbl_cf_perbaikan_final_berkas_success_content').show();
				  },
				  type:"POST",
				  data: { page: idxPage},
				  dataType: "json"
			});
	}
		
	rebuildFinalBerkasTableHandler = function(data, selectedPage, tbl_id){
			$('#labelLaporan').html('<i class="icon-bar-chart"></i> Laporan Final');
			rData = data.resultData.data;
			var html = '';
			$('#'+tbl_id).dataTable().fnDestroy();
			if (rData != null){
				$.map(rData, function(item) {
					html += '<tr>'
						 + '<td><a href="#" onclick="lihatLaporan(\''+item.id+'\')">' + item.id + '</a></td>'
						 + '<td>' + item.distrik + '</td>'
						 + '<td>' + item.namaPerpustakaan+ '</td>'
						 + '<td>' + item.jenisLaporan + '</td>'
						 + '<td>' + item.rincianLaporan + '</td>'
						 + '<td>' + item.tglLaporan + '</td>'
						 + '<td>' + item.tglSelesai + '</td>'
						 + '</tr>';
				});
			}

			$('#'+tbl_id+' tbody').html(html);
			
			$('#'+tbl_id).dataTable();
		}
		
		$('#cfBtnList').click(function(event){
			event.preventDefault();
			findCFBerkas();
		}); 
		
		$('#finalBtnList').click(function(event){
			event.preventDefault();
			findFinalBerkas();
		}); 
		
		$('#dqaBtnList').click(function(event){
			event.preventDefault();
			findDQABerkas();
		}); 
		
		$('#cboBtnList').click(function(event){
			event.preventDefault();
			findCBOBerkas();
		}); 
		
		$('#meBtnList').click(function(event){
			event.preventDefault();
			findMEBerkas();
		}); 
		
		findCFBerkas = function(idxPage){
			var display = [ "displayCBO", "displayME", "displayDQA", "displayFINAL", "showExportFinalExcel" ];
			$(display).each(function( i, setDisplay ) {
				$("#"+setDisplay).hide();
			});
			$("#displayCF").show();
			
			if (idxPage == 0 || idxPage == null || typeof idxPage == 'undefined'){
				idxPage = 1;
			} 
			$.ajax({
				  url: "<?php echo base_url()?>inbox/findCFBerkasUser",
				  success: function(data){
				  	rebuildCFBerkasTableHandler(data, idxPage, 'tbl_cf_perbaikan');
				  	$("#tbl_cf_perbaikan").css("width", ""); // akalin width
				  	$('#final_berkas_success_loading').hide();
					$('#tbl_cf_perbaikan_final_berkas_success_content').show();
				  },
				  type:"POST",
				  data: { page: idxPage, status: "NOK"},
				  dataType: "json"
			});

			$.ajax({
				  url: "<?php echo base_url()?>inbox/findCFBerkasUser",
				  success: function(data){
				  	rebuildCFBerkasTableHandler(data, idxPage, 'tbl_cf_draft');
				  	$("#tbl_cf_draft").css("width", ""); // akalin width
					$('#tbl_cf_draft_final_berkas_success_content').show();
				  },
				  type:"POST",
				  data: { page: idxPage, status: "START"},
				  dataType: "json"
			});
			
			$.ajax({
				  url: "<?php echo base_url()?>inbox/getBerkasByType",
				  success: function(result){
			        renderCFChart(result, "chart_cf_perbaikan_jenis_laporan");
				  },
				  type:"POST",
				  data: { status: "NOK"},
				  dataType: "json"
			});
			
			$.ajax({
				  url: "<?php echo base_url()?>inbox/getBerkasByType",
				  success: function(result){
			        renderCFChart(result, "chart_cf_draft_jenis_laporan");
				  },
				  type:"POST",
				  data: { status: "START"},
				  dataType: "json"
			});
		}
		
		renderCFChart = function(result, idChart){
					$('#' + idChart).highcharts({
			            chart: {
			                plotBackgroundColor: null,
			                plotBorderWidth: null,
			                plotShadow: false
			            },
			            title: {
			                text: 'Berdasarkan Tipe Laporan'
			            },
			            tooltip: {
			                pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)'
			            },
			            plotOptions: {
			                pie: {
			                    allowPointSelect: true,
			                    cursor: 'pointer',
			                    dataLabels: {
			                        enabled: false
			                    },
			                    showInLegend: true
			                }
			            },
				        credits: {
				            enabled: false
				        },
			            series: [{
			                type: 'pie',
			                name: 'Total Laporan',
			                data: result
			            }]
			        });
		}
		
		rebuildCFBerkasTableHandler = function(data, selectedPage, tbl_id){
			$('#labelLaporan').html('<i class="icon-bar-chart"></i> Laporan CF');
			rData = data.resultData.data;
			if(typeof(rData) != "undefined" && rData !== null) {
			    $('#total_'+tbl_id).html(rData.length);
			}
			var html = '';
			$('#'+tbl_id).dataTable().fnDestroy();

			if (rData != null){
				$.map(rData, function(item) {
					html += '<tr>'
						 + '<td><a href="#" onclick="lihatLaporan(\''+item.id+'\')">' + item.id + '</a></td>'
						 + '<td>' + item.distrik+ '</td>'
						 + '<td>' + item.namaPerpustakaan+ '</td>'
						 + '<td>' + item.jenisLaporan + '</td>'
						 + '<td>' + item.rincianLaporan + '</td>'
						 + '<td>' + item.tglLaporan + '</td>'
						 + '<td>' + getTindakanBtn(item.id,'6') + '</td>'
						 + '</tr>';
				});
			}

			$('#'+tbl_id+' tbody').html(html);
			
			$('#'+tbl_id).dataTable();
		}
		
	findDQABerkas = function(idxPage){
			var display = [ "displayCF", "displayCBO", "displayME", "displayFINAL", "showExportFinalExcel" ];
			$(display).each(function( i, setDisplay ) {
				$("#"+setDisplay).hide();
			});
			$("#displayDQA").show();
			if (idxPage == 0 || idxPage == null || typeof idxPage == 'undefined'){
				idxPage = 1;
			} 
			$.ajax({
				  url: "<?php echo base_url()?>inbox/findCFBerkasProgress",
				  success: function(data){
				  	rebuildDQABerkasTableHandler(data, idxPage, "tbl_dqa");
				  	$("#tbl_dqa").css("width", ""); // akalin width
					$('#tbl_dqa_final_berkas_success_content').show();
				  },
				  type:"POST",
				  data: { page: idxPage},
				  dataType: "json"
			});
	}
		
	rebuildDQABerkasTableHandler = function(data, selectedPage, tbl_id){
			$('#labelLaporan').html('<i class="icon-bar-chart"></i> Laporan DQA');
			rData = data.resultData.data;
			var html = '';
			$('#'+tbl_id).dataTable().fnDestroy();
			if (rData != null){
				$.map(rData, function(item) {
					html += '<tr>'
						 + '<td><a href="#" onclick="lihatLaporan(\''+item.id+'\')">' + item.id + '</a></td>'
						 + '<td style="text-align: left;">' + item.distrik+ '</td>'
						 + '<td style="text-align: left;">' + item.namaPerpustakaan+ '</td>'
						 + '<td style="text-align: left;">' + item.jenisLaporan + '</td>'
						 + '<td>' + item.rincianLaporan + '</td>'
						 + '<td>' + item.tglInbox + '</td>'
						 + '<td>' + item.step + '</td>'
						 + '</tr>';
				});
			}

			$('#'+tbl_id+' tbody').html(html);
			
			$('#'+tbl_id).dataTable();
		}
		
	
		
		
	findMEBerkas = function(idxPage){
			var display = [ "displayCF", "displayCBO", "displayDQA", "displayFINAL", "showExportFinalExcel" ];
			$(display).each(function( i, setDisplay ) {
				$("#"+setDisplay).hide();
			});
			$("#displayME").show();
			if (idxPage == 0 || idxPage == null || typeof idxPage == 'undefined'){
				idxPage = 1;
			} 
			$.ajax({
				  url: "<?php echo base_url()?>inbox/findMEBerkas",
				  success: function(data){
				  	rebuildMEBerkasTableHandler(data, idxPage, "tbl_me");
				  	$("#tbl_me").css("width", ""); // akalin width
					$('#tbl_me_final_berkas_success_content').show();
				  },
				  type:"POST",
				  data: { page: idxPage},
				  dataType: "json"
			});
	}
	
	getTindakanBtn = function (idBerkas, profileId) {
		var base_url = '<?php echo base_url()?>';
		var initProfile = <?php echo $initProfile?>;
		if (initProfile == profileId){
			return "<a href='" + base_url + "inbox/createEdit/"+ profileId + "/" + idBerkas + "' class='btn mini icn-only blue'>View</a>";
		} return "<a href='#' class='disabled btn mini icn-only grey'>View</a>";
	}	
	
	rebuildMEBerkasTableHandler = function(data, selectedPage, tbl_id){
			$('#labelLaporan').html('<i class="icon-bar-chart"></i> Laporan ME');
			rData = data.resultData.data;
			var html = '';
			$('#'+tbl_id).dataTable().fnDestroy();
			if (rData != null){
				$.map(rData, function(item) {
					html += '<tr>'
						 + '<td><a href="#" onclick="lihatLaporan(\''+item.id+'\')">' + item.id + '</a></td>'
						 + '<td style="text-align: left;">' + item.distrik+ '</td>'
						 + '<td style="text-align: left;">' + item.namaPerpustakaan+ '</td>'
						 + '<td style="text-align: left;">' + item.jenisLaporan + '</td>'
						 + '<td style="text-align: left;">' + item.rincianLaporan + '</td>'
						 + '<td>' + item.tglLaporan + '</td>'
						 + '<td>' + item.tglInbox + '</td>' 
						 + '<td>' + getTindakanBtn(item.id, '11') + '</td>'
						 + '</tr>';
				});
			}

			$('#'+tbl_id+' tbody').html(html);
			
			$('#'+tbl_id).dataTable();
		}
		
		<?php 
			if ($initProfile == 6){
				echo "findCFBerkas();";
			} 
		?>
		
	});
</script>

<script src="<?php echo base_url()?>assets/highcarts/highcharts.js"></script>
<script src="<?php echo base_url()?>assets/highcarts/modules/exporting.js"></script>
